<template>
  <div class="carManage">
    <div class="mainPage" v-if='!isAdd'>
      <div class="search">
        <el-form :inline="true" :model="wasteManage" class="demo-form-inline companyAdd">
          <el-select v-model="wasteManage.wasteId" placeholder="危废名称">
            <el-option :label="item.name" :value="item.id" v-for="item in wasteList" :key="item.id"></el-option>
          </el-select>
          <el-form-item label="危废代码">
            <!-- <el-input v-model="wasteManage.wasteCode" placeholder="危废代码"></el-input> -->
            <el-select v-model="wasteManage.wasteCode" placeholder="危废代码">
              <el-option :label="item.dangerousType" :value="item.dangerousType" v-for="item in wasteList" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch">查询</el-button>
            <el-button type="default" @click="resetSeachConditions">重置</el-button>
          </el-form-item>
        </el-form>
        <el-button type='primary' class='addBtn' @click='addCar'>新增</el-button>
      </div>
      <!-- 表格数据 -->
      <div class="tableData">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column type="index" label="序号" width="50">
          </el-table-column>
          <el-table-column prop='wfCompanyName' label="产废单位">
          </el-table-column>
          <el-table-column prop='wfName' label="危废名称">
          </el-table-column>
          <el-table-column prop='dangerousType' label="危废代码">
          </el-table-column>
          <el-table-column prop='dpCompanyName' label="处置单位">
          </el-table-column>
          <el-table-column prop='opCompanyName' label="运营单位">
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="text" size="small">修改</el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    <!-- 这是新增了呢 -->
    <div class="carAdd" v-if='isAdd'>
      <el-button type='private' size='small' @click='goBack'>返回</el-button>
      <el-form :mode='addRelation' :inline="true" class='addRelationForm'>
        <el-form-item label='产废单位' class='cfCompany'>
          <el-input placeholer='请选择产废单位' v-model='addRelation.cfCompany'></el-input>
        </el-form-item>
        <br>
        <br>
        <div style="display: flex;justify-content: space-between;">
          <div class="list">
            <el-form-item label='危废名称'>
              <el-select v-model="addRelation.wasteName" placeholder="危废名称">
                <el-option label='废机油' value='1'></el-option>
              </el-select>
            </el-form-item>
            <br>
            <br>
            <el-form-item label='处置单位'>
              <el-input placeholer='请选择产废单位' v-model='addRelation.czCompany'></el-input>
            </el-form-item>
            <br>
            <br>
            <el-form-item label='运营单位'>
              <el-input placeholer='请选择产废单位' v-model='addRelation.ysCompany'></el-input>
            </el-form-item>
          </div>
          <div class="list">
            <el-form-item label='危废名称'>
              <el-select v-model="addRelation.wasteName" placeholder="危废名称">
                <el-option label='废机油' value='1'></el-option>
              </el-select>
            </el-form-item>
            <br>
            <br>
            <el-form-item label='处置单位'>
              <el-input placeholer='请选择产废单位' v-model='addRelation.czCompany'></el-input>
            </el-form-item>
            <br>
            <br>
            <el-form-item label='运营单位'>
              <el-input placeholer='请选择产废单位' v-model='addRelation.ysCompany'></el-input>
            </el-form-item>
          </div>
        </div>
        <br>
        <br>
        <el-form-item>
          <el-button type="primary">确定</el-button>
          <el-button type="default">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {

  name: 'CarManage',
  inject: ['reload'],
  data() {
    return {
      page: 1,
      limit: 10,
      tableData: [],
      wasteManage: {
        wasteName: null,
        wasteCode: null,
        wasteId: null,
      },
      addRelation: {
        cfCompany: null,
        wasteName: null,
        czCompany: null,
        ysCompany: null
      },
      rules: {
        carNumber: [{
          required: true,
          message: '请填写车牌号',
          triggle: 'blur'
        }],
        carProperty: [{
          required: true,
          message: '请选择车辆属性',
          triggle: 'change'
        }],
        superviseCompany: [{
          required: true,
          message: '请填写所属公司',
          triggle: 'blur'
        }],
        weight: [{
          required: true,
          message: '请填写载重量',
          triggle: 'blur'
        }],
        carType: [{
          required: true,
          message: '请填写车辆类型',
          triggle: 'blur'
        }],

      },
      isAdd: false,
      currentPage: 1,
      total: 0,
      wasteList: []

    }
  },
  created() {
    this.initList();
    // 获取所有危废类型列表
    this.$common.$ajax('/wf/wastetype/wastetype', {}, 'get').then(res => {
      this.wasteList = res.data.body
    })
  },
  methods: {
    initList() {
      this.$common.$ajax('/sys/company/relation/list', {
        page: this.page,
        limit: this.limit,
        wfTypeId: this.wasteManage.wasteId,
        dangerType: this.wasteManage.wasteCode

      }, 'get').then(res => {
        this.tableData = res.data.body.list;
        this.total = res.data.body.totalCount
      })
    },
    getCarType() {

    },
    addCar() {
      this.isAdd = true;
    },
    onSearch() {
      this.initList()
    },
    resetSeachConditions() {
      this.wasteManage.wasteId = null;
      this.wasteManage.wasteCode = null;
      this.initList();
    },
    onSubmit() {

    },
    cancleUpdate() {

    },
    goBack() {
      this.reload()
    },
    handleSizeChange(val) {
      this.limit = val;
      this.initList()
    },
    handleCurrentChange(val) {
      this.page = val;
      this.initList()
    }


  }
}

</script>
<style lang="scss" scoped>
.carManage {
  .search {
    display: flex;
    justify-content: space-between;

    .addBtn {
      height: 40px;
    }
  }
}

.addRelationForm {
  text-align: center;
  width: 50%;
  margin: 0 auto;

  .list {
    width: 50%;

    .el-form-item {
      width: 100%;
    }
  }
}

</style>
